<template>
  <div>
    <div>本周热门榜单</div>
    <ul class="hotlist-ul">
      <li class="hotlist-list" v-for="item of HostListArr" :key="item.id">
        <img :src="item.imgUrl">
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      HostListArr: [
        {
          id: "0001",
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/1802/12/128d61fb77423368a3.img.jpg_250x250_e7943b21.jpg"
        },
        {
          id: "0002",
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/201403/10/b7aa220089fa8054e6e012bafff63042.jpg_250x250_805c5f13.jpg"
        },
        {
          id: "0003",
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/1408/18/af4e8d5427a982540ec265b0daab2971.jpg_250x250_2b221aa9.jpg"
        },
        {
          id: "0004",
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/201403/07/121fa500c65e619844a875ca6fe757bc.jpg_250x250_cd67ee38.jpg"
        },
        {
          id: "0005",
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/1710/f5/f575b0f463058f96a3.img.jpg_250x250_d20b0636.jpg"
        },
        {
          id: "0006",
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/1412/36/0b5ddfc9e04db2b870a84986fa7444a0.water.jpg_250x250_8e923e7f.jpg"
        },
        {
          id: "0007",
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/201301/14/c6b64cc6ec60b39e93835fbb.jpg_250x250_2058b408.jpg"
        },
        {
          id: "0008",
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/1809/e5/e557eddf1b11c017a3.img.jpg_250x250_80b6a44d.jpg"
        },
        {
          id: "0009",
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/1812/1a/1a23a281559b846a3.img.jpg_250x250_8d2883da.jpg"
        },
        {
          id: "0010",
          imgUrl:
            "http://img1.qunarzz.com/sight/p0/1611/20/205db6ee32a4a29ba3.water.jpg_250x250_650636c9.jpg"
        }
      ]
    };
  }
};
</script>
<style lang="stylus" scoped>
.hotlist-ul {
  border: 1px solid #ccc;
  width: 100%;

  .hotlist-list {
    float: left;
    width:25%;
    padding-bottom: 25%;
    height :0;
  }
}
</style>


